<template>
	<PageContainer name='账号管理' :show-footer="true">
		<view class="menu-list">
			<view class="menu-item flex-row-between" @click="editPassword">
				<view class="menu-name">修改密码</view>
				<uni-icons type="right"></uni-icons>
			</view>
			<view class="menu-item flex-row-between">
				<view class="menu-name">手机号</view>
				<view>{{userInfo.phone}}</view>
			</view>
			<view class="menu-item flex-row-between" @click="revoked">
				<view class="menu-name">注销账号</view>
				<uni-icons type="right"></uni-icons>
			</view>
		</view>
		<template #footer>
			<view class="global-page-footer flex-row">
				<button class="global-submit-button" @click="outLogin">退出登录</button>
			</view>
		</template>
	</PageContainer>
</template>

<script>
	import store from '@/store'
	import {
		revoked
	} from '@/api/system/user.js';
	import PageContainer from '@/components/PageContainer/PageContainer.vue';
	export default {
		components: {
			PageContainer
		},
		computed: {
			userInfo() {
				const {
					user
				} = store.state;
				return user;
			},
		},
		methods: {
			editPassword() {
				uni.navigateTo({
					url: '/pages/account/edit',
				})
			},

			/**
			 * 注销账号
			 */
			revoked() {
				uni.showModal({
					title: '温馨提示',
					content: '确定要注销账号吗？注销后您的账号数据将不能恢复！',
					success: (res) => {
						if (res.cancel) {
							return;
						}
						revoked().then(() => {
							uni.showToast({
								title: '操作成功',
								icon: 'none',
							})
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/entrance/login',
								})
							}, 500)
						})
					}
				})
			},

			/**
			 * 退出登录
			 */
			outLogin() {
				uni.showModal({
					title: '温馨提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.cancel) {
							return;
						}
						this.$store.dispatch('LogOut').then(() => {
							uni.showToast({
								title: '操作成功',
								icon: 'none',
							})
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/entrance/login',
								})
							}, 500)
						});
					},
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.menu-list {
		.menu-item {
			padding: 36rpx 0;

			.menu-name {
				color: #333;
				font-size: 34rpx;
			}
		}
	}
</style>